<template>
    <div class="pie" ref="pie">

    </div>
</template>

<script>
import echart from 'echarts'

export default {
    props: {
        dataSource: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: '环形图'
        },
        valueUnit: {
            type: String,
            default: '个'
        }
    },
    watch: {
        dataSource: {
            handler(val, oldVal) {
                this.initChart()
            },
            deep: true
        }
    },
    mounted() {
        this.initChart()
    },
    data() {
        return {
            myChart: null
        }
    },
    methods: {
        initChart() {
            this.myChart = echart.init(this.$refs.pie);
            // 指定图表的配置项和数据
            //app.title = '环形图';

            let option = {
                //饼图颜色
                color: ['#ffa32c', '#ffd754', '#44a1df', '#224a87', '#52f5a7',],
                title: {
                    text: this.title,    //正标题
                    subtext: '', //副标题
                    left: 'center'    //居中对齐
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },

                // 图形显示
                legend: {
                    type: 'scroll',
                    orient: 'vertical', //布局的方向,垂直排列
                    // 默认圆角矩形roundRect，'circle' 椭圆，'rect' 矩形，'roundRect' 圆角矩形 '，triangle' 三角形，'diamond' 菱形，'pin' 正圆 ，'arrow' 箭头.使用icon:'image:/ico/echarts.png',
                    icon: 'pin',
                    x: '0',
                    y: '0',
                    //图例相互之间的距离
                    itemGap: 20,
                    //图例的宽度             
                    // itemWidth: 10, 
                    //图例的高度            
                    // itemHeight: 10,
                    textStyle:{
                        fontSize: 16,
                    },
                    
                    data: this.dataSource,

                    formatter: (name) => {
                        //百分比数据的计算
                        let total = 0;
                        let target = null;
                        for (let i = 0, l = this.dataSource.length; i < l; i++) {
                            total += this.dataSource[i].value;
                            if (this.dataSource[i].name == name) {
                                target = this.dataSource[i].value;
                            }
                        }
                        // toFixed()四舍五入两位小数
                        return name + '  '  + ((target / total) * 100).toFixed(2) + '%';
                    }
                },

                series: [
                    {
                        // 双饼状图指示
                        name: '距离：数量/占比',
                        //类型饼状图
                        type: 'pie',
                        //是否开启 hover 在扇区上的放大动画效果，默认默认开启
                        //hoverAnimation:false,
                        //内半径，外半径，内半径0时为弧形
                        // radius:'70%',
                        radius: ['30%', '70%'],
                        //是否启用防止标签重叠策略，默认默认开启
                        avoidLabelOverlap: true,
                        // center 圆心位置，距离top，距离left
                        center: ['65%', '50%'],
                        //图形是否不响应和触发鼠标事件
                        //silent: true,
                        top: '20%',
                        // bottom:'20%',

                        label: {
                            // normal: {
                            //     show: true,
                            //     position: 'center'
                            // },
                            formatter:"{b}：{d}%",
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '24',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        // labelLine: {
                        //     normal: {
                        //         show: false
                        //     }
                        // },
                        data: this.dataSource
                    }
                ]

            }
            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
            window.addEventListener("resize", () => {
                this.myChart.resize();
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.pie {
    width: 100%;
    height: 100%;
}
</style>